<!DOCTYPE html>
<html>

<head>
    <title>gameInfo</title>

    <!--字体图标-->
    <link href="javaex/pc/css/icomoon.css" rel="stylesheet" />
    <!--动画-->
    <link href="javaex/pc/css/animate.css" rel="stylesheet" />
    <!--骨架样式-->
    <link href="javaex/pc/css/common.css" rel="stylesheet" />
    <!--皮肤（缇娜）-->
    <link href="javaex/pc/css/skin/tina.css" rel="stylesheet" />
    <!--jquery，不可修改版本-->
    <script src="javaex/pc/lib/jquery-1.7.2.min.js"></script>
    <!--全局动态修改-->
    <script src="javaex/pc/js/common.js"></script>
    <!--核心组件-->
    <script src="javaex/pc/js/javaex.min.js"></script>
    <!--表单验证-->
    <script src="javaex/pc/js/javaex-formVerify.js"></script>
</head>
<style>
    .logo_image {
        width: 93.84px;
        height: 64px;
        margin-left: 5px;
    }
    
    .logo_name {
        margin-left: 20px;
    }
    
    body {
        background-image: url(http://img.javaex.cn/FipOsQoe90u_7i3dOVpaeX5QD7c6)
    }
    
    .main {
        width: 400px;
        height: 600px;
        margin: auto;
        border: 5px solid white;
        background-color: #fff;
        margin-top: 70px;
        display: flex;
        flex-flow: column;
    }
    
    .logo {
        flex: 2;
        display: flex;
    }
    
    .admin_logo {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .admin_name {
        flex: 4;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .logo_name {
        font-size: 30px;
        font-weight: 500;
    }
    
    .contest_1,
    .contest_2 {
        flex: 2;
        border-bottom: 0;
        display: flex;
        flex-direction: column
    }
    
    .game_choose,
    .checked_contest {
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        margin: auto;
    }
    
    .contest_choose,
    .contest_checked {
        margin-top: 50px;
        width: 300px;
        height: 50px;
        margin: auto;
        font-size: 20px;
    }
    
    .confirm {
        margin: auto;
    }
    
    .game_checked {
        width: 150px;
        height: 40px;
    }
</style>

<body>
    <div class="main">
        <div class="logo">
            <div class="admin_logo"><img class="logo_image" src="https://ae01.alicdn.com/kf/H582410e2afca4e89a0ab646fb739786bH.png" />
            </div>
            <div class="admin_name"><span class="logo_name">CubeOnline<br>魔方比赛系统</span>
            </div>
        </div>
        <form id="choose_game">
            <div class="contest_1">
                <button class="button blue radius-8 contest_choose">可选比赛</button><br>
                <div class="game_choose">
                    <input type="checkbox" class="fill" />比赛1<br>
                    <input type="checkbox" class="fill" />比赛1<br>
                    <input type="checkbox" class="fill" />比赛1<br>
                    <button class="button red radius-5 "> 确认报名</button>
                    <br>
                </div>
            </div>

        </form>

        <div class="contest_2">
            <button class="button navy radius-8 contest_checked">已选比赛, 点击进入</button>
            <div class="checked_contest">
                <!-- <a href="http://blog.lstf666.com"><input type="checkbox" class="fill" checked onclick="window.location.href('http://blog.lstf666.com')" />比赛1</a><br> -->
                <br><a href="gameDetail.html"><button class="button green radius-8 game_checked">比赛1</button></a>
                <br><a href="#"><button class="button green radius-8 game_checked">比赛1</button></a>
                <br><a href="#"><button class="button green radius-8 game_checked">比赛1</button></a>
            </div>
        </div>

    </div>
</body>

</html>